<template>
	<view class="stowage-Box" :data="ListData">
		<view class="stowageList" v-for="item in ListData" @click="jump(item)">
			<view class="stowageHead" v-show="item.billStatus == 1">
				<view class="stowageLeft">
					未接单
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo?item.billNo : '暂无'}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 2 && item.shippingStatus == 1">
				<view class="stowageLeft">
					未起运
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 2 && item.shippingStatus == 2"
				style="background: linear-gradient(90deg, #EFFBF7 0%, rgba(255,255,255,0.95) 100%);">
				<view class="stowageLeft" style="background: #16C295;">
					运输中
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 2 && item.shippingStatus == 3"
				style="background: linear-gradient(90deg, #EFFBF7 0%, rgba(255,255,255,0.95) 100%);">
				<view class="stowageLeft" style="background: #16C295;">
					已送达
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 2 && item.shippingStatus == 4"
				style="background: linear-gradient(90deg, #EBF5FF 0%, rgba(255,255,255,0.95) 100%">
				<view class="stowageLeft" style="background: #00468C;">
					已回单
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 2 && item.shippingStatus == 5"
				style="background: linear-gradient(90deg, #EBF5FF 0%, rgba(255,255,255,0.95) 100%">
				<view class="stowageLeft" style="background: #00468C;">
					回单已确认
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 3"
				style="background: linear-gradient(90deg, #EFFBF7 0%, rgba(255,255,255,0.95) 100%);">
				<view class="stowageLeft" style="background: #16C295;">
					已完成
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 4"
				style="background: linear-gradient(90deg, #EFFBF7 0%, rgba(255,255,255,0.95) 100%);">
				<view class="stowageLeft" style="background: #16C295;">
					已作废
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus ==5"
				style="background: linear-gradient(90deg, #FFF1EE 0%, rgba(255,255,255,0.95) 100%);">
				<view class="stowageLeft" style="background: #8D090C;">
					取消申请中
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="stowageHead" v-show="item.billStatus == 6"
				style="background: linear-gradient(90deg, #FFF1EE 0%, rgba(255,255,255,0.95) 100%);">
				<view class="stowageLeft" style="background: #8D090C;">
					已取消
				</view>
				<view class="stowageContent">
					配载单号：{{item.billNo}}
				</view>
				<view class="tag" if="item.receiptTotal">
					回单付
				</view>
			</view>
			<view class="address">
				<view class="addressStar">
					<view class="icon start">始</view>
					
					{{(item.shippingCity+(item.shippingAddress!=null?item.shippingAddress:'')).substring(0,22)}}
					{{(item.shippingCity+(item.shippingAddress!=null?item.shippingAddress:'')).substring(22)?'…':''}}
				</view>
				<view class="addressEnd">
					<view class="icon end">收</view>
					{{(item.receiptCity+(item.receiptAddress!=null?item.receiptAddress:'')).substring(0,22)}}
					{{(item.receiptCity+(item.receiptAddress!=null?item.receiptAddress:'')).substring(22)?'…':''}}
				</view>
			</view>
			<view class="stowageInfo">
				<view class="company">承运商： {{item.carrierName}}</view>
				<view class="goods">
					<view class="goodsName">货物名称： <text>{{item.goodsName}}/{{item.shippedNum}}{{item.unit}}</text> </view>
					<view class="right">
						<view>车牌号：</view>
						<Plate :plate="item.vehicleNo" :vehicleFlag ="item.vehicleFlag "></Plate>
					</view>
				</view>
				<view class="phoneInfo">
					<view>联系方式： <text :style="item.driverFlag != 1?'color:#F04848;':''">{{item.driverName}}｜{{item.driverTel}}</text> </view>
					
					<view class="called" v-if="item.driverFlag != 1" :style="item.driverFlag != 1?'background:rgba(255, 212, 212, 1)':''">
						<text style="color:#F04848;">未注册</text>
					</view>
					<view v-else class="called">
						<text @click.stop="phone(item)">点击拨打</text>
					</view>
					
				</view>
				<view class="timeInfo">
					<view>发布时间： <text>{{changeTimeFormat(item.crtTime)}}</text> </view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Plate from '@/components/plate/plate.vue'
	import Cache from '@/utils/cache'
	export default {
		props: {
			ListData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {

				searchForm: {
					page: 1,
				},
				page: 1
			}
		},
		components: {
			Plate
		},
		mounted() {

		},
		methods: {
			changeTimeFormat: function(time) {
				var date = new Date(time);
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				return date.getFullYear() + "-" + month + "-" + currentDate + " " + hh + ":" + mm;
				//返回格式：yyyy-MM-dd hh:mm
			},
			//配载单详情
			jump(item) {
				Cache.set('itemId', item.itemId)
				this.$emit('setstowageForm')
				uni.navigateTo({
					url: '/pages/waybill/stowageDetails?loadingOrderId=' + item.loadingOrderId
				});
			},
			phone(item){
				// uni.setClipboardData({
				// 	   data:item.driverTel,//要被复制的内容
				// 	   success:()=>{
				// 		 uni.showToast({
				// 		   title:"复制成功"
				// 		 })
				// 	   }
				// 	});
				uni.makePhoneCall({
					phoneNumber: item.driverTel //仅为示例
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}


	.stowage-Box {
		box-sizing: border-box;
		padding-bottom: 0 !important;

		.stowageList {
			width: 100%;
			background: #FFFFFF;
			border-radius: 8rpx;
			overflow: auto;
			margin: 24rpx 0;
			padding-bottom: 24rpx;
			box-sizing: border-box;

			.stowageHead {
				height: 94rpx;
				line-height: 94rpx;
				display: flex;
				padding: 27rpx 0 0 29rpx;
				background: linear-gradient(90deg, #E9EEF6 0%, rgba(255, 255, 255, 0.95) 100%);

				.stowageLeft {
					height: 40rpx;
					background: #586486;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					text-align: center;
					padding: 0 4rpx;
				}

				.stowageContent {
					margin: 0 0 0 12rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				.tag {
					margin-left: 4rpx;
					width: 74rpx;
					height: 32rpx;
					background: #E8E8E8;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					color: #888888;
					font-size: 24rpx;
				}
			}

			.address {
				padding: 18rpx 0 0 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;

				.addressStar {
					padding-left: 34rpx;
					margin-bottom: 28rpx;
					height: 40rpx;

					.icon {
						font-size: 20rpx;
						float: left;
						padding: 0 12rpx;
						border-radius: 12rpx;
						margin-right: 12rpx;
						color: #fff;

						&.start {
							background: #000;
						}
					}
				}

				.addressEnd {
					padding-left: 34rpx;
					margin-bottom: 30rpx;
					height: 40rpx;

					.icon {
						font-size: 20rpx;
						float: left;
						padding: 0 12rpx;
						border-radius: 12rpx;
						margin-right: 12rpx;
						color: #fff;

						&.end {
							background: #8c0a0c;
						}
					}
				}
			}

			.stowageInfo {
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 33rpx;
				padding-left: 33rpx;

				.company {
					margin-bottom: 14rpx;
					font-size: 24rpx;
				}

				.goods {
					font-size: 26rpx;
					display: flex;
					align-items: center;

					.goodsName {
						margin-right: 40rpx;
					}
					.right{
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.goodsName text {
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #00468C;
					}
				}

				.phoneInfo {
					font-size: 26rpx;
					display: flex;
					margin-top: 16rpx;

					text {
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.called {
						width: 98rpx;
						text-align: center;
						height: 40rpx;
						background: #F0F7FF;
						border-radius: 4rpx;
						color: #003E81;
						display: inline-block;
						margin-left: 28rpx;

						text {
							zoom: 0.9
						}
					}
				}

				.timeInfo {
					font-size: 26rpx;
					display: flex;
					margin-top: 16rpx;

					.text {
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}

				.name {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
					margin: 16rpx 0 26rpx 0;
				}

				.goodsInfo {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
					display: flex;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #8C0000;
					}

					.goodsName {
						padding-right: 44rpx;

						text {
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #00468C;
						}
					}
				}

				.progress {
					font-size: 22rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					display: flex;
					padding-top: 18rpx;
					line-height: 24rpx;

					.progressBar {
						width: 350rpx;
						height: 28rpx;
						margin-right: 28rpx;
					}
				}
			}
		}
	}
</style>
